<script setup>

</script>

<template>
  <div>
    <!-- 导航栏 -->
    <nav>
      <a href="scene.html">网站首页</a>
      <a href="scene.html">校园奶爸简介</a>
      <a href="people.html">情景介绍</a>
      <a href="people.html">人物简介</a>
    </nav>

    <!-- 主要区域 -->
    <div id="main">
      <div id="banner">
        <div class="banner-container">
          <div class="img-container1">
            <img src="image/5.jpg" alt="banner">
          </div>
          <div class="text-container1">
            <h1>校园奶爸简介</h1>
          </div>
          <div class="image-text-container">
            <img src="image/6.jpg" alt="校园奶爸">
            <p>双亲因飞机失事而去世的龙一&虎太郎兄弟。收养了这两人的是，同样因事故而失去儿子儿媳的森之宫学园理事长。但条件是，龙一必须在学园内设置的保育室负责照顾小孩！为了做母亲的老师而在学园内设置的保育室。为了补足那里的人手不足而创设的“育儿部”，龙一成为了部员第一号……！？</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部 -->
    <footer>
      &copy; 2023 校园奶爸-Author
    </footer>
  </div>
</template>

<style scoped>
/* 基本样式 */
body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  background-color:#FFF5EE;
}

/* 导航栏样式 */
nav {
  background-color: #ff7f50; /* 粉色背景 */
  color: #fff;
  text-align: center;
  border-radius: 15px;
  padding: 10px 50px;
}
nav a {
  display: inline-block;
  padding: 10px 20px;
  text-decoration: none;
  color: inherit;
  border-radius: 15px; /* 格子部分圆滑处理 */
  margin-right: 10px; /* 部分格子之间增加间距 */
}
nav a:hover {
  background-color: #ffffff; /* 鼠标悬停时的背景颜色 */
  color: #ff7f50; /* 鼠标悬停时的文字颜色 */
}

/* 主要区域样式 */
#main {
  max-width: 800px;
  margin: 50px auto;
  padding: 0 20px;
}

.banner-container {
  position: relative;
}

.img-container1 {
  height: 400px;
  overflow: hidden;
}

.img-container1 img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.text-container1  h1 {
  font-size: 36px;
  font-weight: bold;
  margin-top: 10px; /* 去除标题顶部的默认边距 */
  text-align: left; /* 将标题文字左对齐 */
}

.image-text-container {
  margin-top: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-text-container img {
  max-width: 45%;
  border-radius: 15px;
  margin-right: 5%;
}

.image-text-container p {
  max-width: 50%;
  font-size: 20px;
  line-height: 1.5;
  text-align: justify;
}

/* 底部样式 */
footer {
  background-color: #f0f0f0;
  padding: 10px;
  text-align: center;
  border-radius: 15px;
}
</style>
